<template>
	<view 
		class="wrap" 
		:style="{ 
			'transform': `rotate(${ rotateCount }deg)`,
			'height': `${ props.boxHeight }px`,
			'--primary-shadow-white-size': `${props.shadowWhiteSize}px`
		}" 
		@touchstart="touchStart" 
		@touchmove="touchMove" 
		@touchend="touchEnd">
		<canvas 
			class="prew-canvas" 
			canvas-id="myCanvas"
			:style="{ 
				'left': `${ position.x + positionDiff.x }px` , 
				'top': `${ position.y + positionDiff.y }px`,
				'height': `${ (scaleFactor + scaleDiff) * props.canvasSize }px`,
				'width': `${ (scaleFactor + scaleDiff) * props.canvasSize }px`  
			}"
		></canvas>
	</view>
	
	<view @click="getImg">获取图片</view>
	<!-- <view @click="rotate">旋转</view> -->
	<image :style="{ 'width': `${shadowWhiteSize}px`, 'height': `${shadowWhiteSize}px`}" :src="imgSrc"></image>
</template>

<script setup>
import { onMounted,nextTick, reactive, ref,getCurrentInstance,defineProps } from 'vue';

/**
 * canvas 图片截取
 * @description 
 * @property {Number} canvasSize 画布图片大小
 * @property {Number} boxHeight 阴影盒子高度
 * @property {Number} shadowWhiteSize 阴影中间白色区域大小
 * @property {String} imgSrc 图片路径
 */
const props = defineProps({
	canvasSize: {
		type: Number,
		default: 200
	},
	boxHeight: {
		type: Number,
		default: 300
	},
	shadowWhiteSize: {
		type: Number,
		default: 100
	},
	imgSrc: {
		type: String,
		default: '/static/logo.png'
	}
})


const systemInfo = reactive({
	width: 0,
})

// const canvasSize = ref(200);
// const boxHeight = ref(300);
// const shadowWhiteSize = ref(100)

const imgSrc = ref('');
const getImg = () => {
	uni.canvasToTempFilePath({
	  canvasId: 'myCanvas',
	  x: systemInfo.width / 2 - props.shadowWhiteSize/2 - position.x,
	  y: (props.boxHeight - props.shadowWhiteSize)/2 - position.y,
	  width: props.shadowWhiteSize,
	  height: props.shadowWhiteSize,
	  success(res) {
		imgSrc.value = res.tempFilePath
	  }
	})
}

const rotateCount = ref(0);
const rotate = () => {
	console.log(rotateCount.value);
	if(rotateCount.value == 270){
		rotateCount.value = 0;
	}else {	
		rotateCount.value = rotateCount.value + 90;
	}
}

const position = reactive({
	x: 0,
	y: 0,
});
const mousechushi = reactive({
	x: 0,
	y: 0,
})
const positionDiff = reactive({
	x: 0,
	y: 0,
})

const startDistance = ref(0);
const scaleFactor = ref(1);
const scaleDiff = ref(0);
const isScale = ref(false);
const distance = ref(0);

const touchStart = (e) => {
	if(e.touches.length === 1){
		console.log(e.touches[0]);
		Object.assign(mousechushi,{ x: e.touches[0].clientX, y: e.touches[0].clientY });
	}else if(e.touches.length === 2){
		startDistance.value = Math.hypot(e.touches[0].pageX - e.touches[1].pageX,
		e.touches[0].pageY - e.touches[1].pageY);
		isScale.value = true;
	}
	
}

const touchMove = (e) => {
	if(e.touches.length === 1){
		let x = e.touches[0].clientX - mousechushi.x;
		let y = e.touches[0].clientY - mousechushi.y;

		if(position.x + x > systemInfo.width/2 - props.shadowWhiteSize/2 ){
			x = systemInfo.width / 2 - props.shadowWhiteSize/2 - position.x;
		}
		if(position.x + x < systemInfo.width/2 + props.shadowWhiteSize/2 - props.canvasSize * scaleFactor.value){
			x = systemInfo.width/2 + props.shadowWhiteSize/2 - props.canvasSize * scaleFactor.value - position.x;
		}
		
		if(position.y + y > (props.boxHeight - props.shadowWhiteSize)/2){
			y = (props.boxHeight - props.shadowWhiteSize)/2 - position.y;
		}
		
		if(position.y + y < (props.boxHeight / 2 + props.shadowWhiteSize/2) - props.canvasSize * scaleFactor.value){
			y = (props.boxHeight / 2 + props.shadowWhiteSize/2) - props.canvasSize * scaleFactor.value - position.y;
		}
		
		Object.assign(positionDiff,{ x: x, y: y});
	}else if(e.touches.length === 2){
		 distance.value = Math.hypot(
		  e.touches[0].pageX - e.touches[1].pageX,
		  e.touches[0].pageY - e.touches[1].pageY
		);
		
		if (startDistance.value !== 0) {
		  let scale = distance.value / startDistance.value - 1;
		  if(scale + scaleFactor.value < 1) {
			  scale = 1 - scaleFactor.value;
		  }else if (scale + scaleFactor.value > 2) {
			  scale = 2 - scaleFactor.value;
		  }
		  // 执行缩放操作，例如调整元素大小或应用缩放变换
		  // console.log('Zoom scale:', scale);
		  scaleDiff.value = scale;
		  // 更新起始距离为当前距离
		  //startDistance.value = distance;
		  
		  //缩放画布，重新绘制
		  const ctx1 = uni.createCanvasContext('myCanvas');
		  let num = props.canvasSize * (scaleFactor.value + scaleDiff.value);
		  ctx1.clearRect(0, 0, num,num);
		  ctx1.drawImage(props.imgSrc, 0, 0, num, num)
		  ctx1.draw();
		
		}
	}
}

const touchEnd = (e) => {
	console.log(isScale.value);
	if(isScale.value) {
		startDistance.value = 0;
		scaleFactor.value = scaleFactor.value + scaleDiff.value;
		intialize();
		nextTick(()=>{
			scaleDiff.value = 0;
			setTimeout(()=>{
				isScale.value = false;
			},1000)
		})
		
	}else{
		console.log(e);
		Object.assign(position, { x: position.x + positionDiff.x, y: position.y + positionDiff.y });
		console.log(position);
		nextTick(()=>{
			Object.assign(positionDiff,{x:0,y:0});
		})
	}	
}

onMounted(()=>{
	  const ctx1 = uni.createCanvasContext('myCanvas');
	  ctx1.drawImage(props.imgSrc, 0, 0, props.canvasSize, props.canvasSize)
	  ctx1.draw();
	  
	   const instance = getCurrentInstance();
	   const query = uni.createSelectorQuery().in(instance);
	   query.select('.wrap').boundingClientRect(res=>{
		   systemInfo.width = res.width;
		   intialize();
	   }).exec();
})

const intialize = () => {
	let x = 0;
	let y = 0;
	let Xdiff = systemInfo.width / 2 + props.shadowWhiteSize / 2 - props.canvasSize * (scaleFactor.value + scaleDiff.value);
	if( Xdiff > 0){
		x = Xdiff;
	}
	let Ydiff = props.boxHeight / 2 + props.shadowWhiteSize / 2 - props.canvasSize * (scaleFactor.value + scaleDiff.value);
	if( Ydiff > 0) {
		y = Xdiff;
	}
	Object.assign(position,{ x: x, y: y });
	Object.assign(positionDiff, { x: 0, y: 0});
}
</script>

<style lang="scss">
// .canvas-box {
// 	width: 100vw;
// 	height: 100vh;
// 	background-color: red;
// }
.wrap {
	position: relative;
	// width: 300px;
	// width: 100%;
	width: 100%;
	// height: 300px;
	overflow: hidden;
	.prew-canvas {
		position: absolute;
		// background-image: url('/static/logo.png');
		top: 0;
		left: 0;
		// width: 200px;
		// height: 200px;
		background-size: 100% 100%;
		transform: scale(1);
		z-index: 0;
	}
	// .prew {
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	background-image: url('/static/logo.png');
	// 	width: 200px;
	// 	height: 200px;
	// 	background-size: 100% 100%;
	// 	transform: scale(1);
	// 	z-index: 0;
		
	// }
	&::before {
		content: '';
		position: absolute;
		width: var(--primary-shadow-white-size);
		height: var(--primary-shadow-white-size);
		// border-radius: 50%;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		box-shadow: 0 0 0 100vh rgba(0,0,0,0.5);
		z-index: 1;
	}
}
</style>